<template>
  <el-row :gutter="60">
    <el-col :span="24" :xs="24" :style="{ marginTop: '20px' }">
      <el-card
        v-if="selectLabel.labelImage != null"
        :body-style="{ padding: '15px', height: '255px', display: 'flex', justifyContent: 'center' }"
        :style="{ borderRadius: '6px' }"
        shadow="never"
      >
        <div>
          <el-image style="width: 200px; height: 200px" :src="selectLabel.labelImage" fit="fill"></el-image>
          <h3 style="text-align: center;">{{ selectLabel.labelNameCn }}</h3>
        </div>
      </el-card>

      <!-- 信息列表 -->
      <ul
        class="infinite-list"
        v-infinite-scroll="load"
        infinite-scroll-disabled="disabled"
        :infinite-scroll-delay="200"
        :style="{ marginTop: '26px' }"
      >
        <li v-for="item in articles" :key="item.id" class="infinite-list-item">
          <el-card
            :body-style="{ padding: '15px', height: '155px', display: 'flex'}"
            :style="{ borderRadius: '6px' }"
            shadow="hover"
          >
            <div>
              <el-image style="width: 230px; height: 155px" :src="item.image" fit="fill"></el-image>
            </div>

            <div :style="{ marginLeft: '20px', position: 'relative', width: '100%' }">
              <div>
                <span
                  v-if="item.userLabel === '' || item.userLabel == null ? false : true"
                  class="badge badge-primary"
                >{{ item.userLabel }}</span>
                <el-link :underline="false">
                  <h3 @click="checkTitle(item)">{{ item.title }}</h3>
                </el-link>
              </div>
              <div :style="{ letterSpacing: '0.03em' }">{{ item.outline }}</div>
              <!-- 设置div沉底 position: 'absolute'  bottom: '6px' -->
              <div :style="{ float: 'right', width: '100%', position: 'absolute', bottom: '10px' }">
                <div v-for="tag in item.labelEntityList" :key="tag.id" :style="{ float: 'left' }">
                  <el-link
                    v-if="tag.isShowCard == 1"
                    type="info"
                    :underline="false"
                    :style="{ marginRight: '10px'}"
                  >{{ tag.labelNameCn }}</el-link>
                </div>

                <time class="time" :style="{ float: 'right' }">{{ item.articleTime }}</time>
              </div>
            </div>
          </el-card>
        </li>
      </ul>
      <p v-if="loading" :style="{ textAlign: 'center' }">加载中...</p>
      <p v-if="noMore" :style="{ textAlign: 'center' }">没有更多了</p>
    </el-col>
  </el-row>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      articles: [],
      selectType: "",
      selectLabel: {},
      loading: false,
      allArticlesSize: 0,
      articlesNowSize: 0,
      articleItem: {},
    };
  },
  //监听属性 类似于data概念
  computed: {
    noMore() {
      return this.articles.length >= this.allArticlesSize;
    },
    disabled() {
      return this.loading || this.noMore;
    },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    load() {
      this.loading = true;
      setTimeout(() => {
        this.getMoreArticles();
        this.loading = false;
      }, 1000);
    },

    getArticle() {
      this.$http({
        url: this.$http.adornUrl("/article/tbarticles/getArticleList"),
        method: "get",
        params: this.$http.adornParams({
          type: this.selectType,
          label: this.selectLabel.id,
        }),
      }).then(({ data }) => {
        this.articles = data.articleList;
        this.articlesNowSize = this.articles.length;
      });
    },

    getMoreArticles() {
      this.$http({
        url: this.$http.adornUrl("/article/tbarticles/getMoreArticleList"),
        method: "get",
        params: this.$http.adornParams({
          type: this.selectType,
          label: this.selectLabel.id,
          start: this.articlesNowSize,
        }),
      }).then(({ data }) => {
        for (let index = 0; index < data.moreArticleList.length; index++) {
          this.articles.push(data.moreArticleList[index]);
        }
        this.articlesNowSize = this.articles.length;
      });
    },

    getSelectArticlesAllSize() {
      this.$http({
        url: this.$http.adornUrl("/article/tbarticles/getArticleListSize"),
        method: "get",
        params: this.$http.adornParams({
          type: this.selectType,
          label: this.selectLabel.id,
        }),
      }).then(({ data }) => {
        this.allArticlesSize = data.articleListSize;
      });
    },

    checkTitle(item) {
      this.articleItem = item;
      this.$router.push({
        path: "/article",
        query: { article: this.articleItem },
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.selectLabel = this.$route.query.selectLabel;
    this.getSelectArticlesAllSize();
    this.getArticle();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.infinite-list {
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 0px;
}

.infinite-list li {
  list-style-type: none;
  padding-bottom: 15px;
}

.el-carousel__item h3 {
  color: white;
  font-size: 25px;
  margin: 0px;
  position: absolute;
  right: 10px;
  bottom: 30px;
  opacity: 1;
}

.el-carousel__item:nth-child(n) {
  background-color: #99a9bf;
  border-radius: 6px;
}

.el-divider {
  margin: 15px 0;
}

.el-timeline {
  padding-top: 10px;
  padding-left: 22px;
  padding-right: 22px;
}

.badge {
  border-radius: 2px;
  font-weight: 400;
  padding: 1px 5px;
  font-size: 13px;
}

.badge-primary {
  color: #fff;
  background-color: #448ef6;
}

.el-tab-pane {
  margin-right: 10px;
}

.el-link h3 {
  margin: 0;
  letter-spacing: 0.06em;
  height: 36px;
  line-height: 36px;
  /* 内容超出时隐藏 */
  overflow: hidden;
  text-overflow: ellipsis;
}

div /deep/.el-tabs__item:hover {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;
  border-radius: 6px;
}

div /deep/.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  border-bottom-color: #0069d9;
  background-color: #0069d9;
  border-color: #0062cc;
  border-radius: 6px;
  color: #fff;
}

div /deep/.el-tabs__item {
  height: 30px;
  line-height: 30px;
  margin-right: 6px;
}
</style>

<style>
.el-tabs--card > .el-tabs__header {
  border-bottom: 0;
}

.el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: 0;
}

.el-tabs--card > .el-tabs__header .el-tabs__item {
  border-left: 0;
  border-bottom: 0;
}
</style>